<template>
    <div class="home">
        <!-- 搜索框 -->
        <van-search shape="round" background="#FFB0CB" placeholder="请输入搜索关键词" />
        <div class="list">
            <!-- 轮播图 -->
            <van-swipe :autoplay="3000" lazy-render style="height: 200px; width: 100%" indicator-color="red">
                <van-swipe-item v-for="image in image" :key="image.bannerid">
                    <img :src="image.img" style="height: 100%; width: 100%" />
                </van-swipe-item>
            </van-swipe>
            <!-- 菜单 -->
            <van-grid :column-num="5">
                <van-grid-item v-for="value in menuItem" :key="value.id" :icon="value.icon" :text="value.title" />
            </van-grid>
            <!-- 商品列表-->
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div class="list">
                        <van-grid :column-num="2" :gutter="5">
                            <van-grid-item v-for="item in productItem" :key="item.proid" @click="toDetail(item.proid)">
                                <van-image :src="item.img1" />
                                <div style="padding: 10px;">{{ item.proname }}</div>
                                <div>价格：{{ item.originprice }}元</div>
                            </van-grid-item>
                        </van-grid>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>
<script setup lang="ts">
import { banners } from '@/api/banner'
import { menuList } from '@/api/menu'
import { proList } from '@/api/products'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
let router = useRouter();

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
let pageParams = ref({
    count: 1,
    limitNum: 10
});
let image = ref<banner[]>([]);
let menuItem = ref<menu[]>([]);
let productItem = ref<products[]>([]);

onMounted(() => {
    list();
});

// 轮播图
interface banner {
    bannerid: string,
    img: string
}
// 菜单
interface menu {
    id: number,
    icon: string,
    title: string
}
// 商品列表
interface products {
    proid: string,
    proname: string,
    originprice: number,
    img1: string
}
let list = function () {
    banners().then(res => {
        image.value = res.data.data;
    });
    menuList().then(res => {
        menuItem.value = res.data.data;
    });
}

// 上拉加载数据
let onLoad = async () => {
    // debugger
    let res = await proList(pageParams.value.count, pageParams.value.limitNum);
    let newData = res.data.data;
    productItem.value.push(...newData);
    loading.value = false;
    pageParams.value.count++;
    if (newData.length < 10) {
        finished.value = true;
    }
}

// 下拉刷新
let onRefresh = async () => {
    pageParams.value.count = 1;
    let res = await proList(pageParams.value.count, pageParams.value.limitNum);
    productItem.value = res.data.data;
    refreshing.value = false;
}

// 跳转详情页面
let toDetail = function (proid: string) {
    router.push({ name: "detail", params: { proid } });
}
</script>

<style scoped lang="scss">
.home {
    // 高度100% 撑满整个父容器
    height: 100%;
    display: flex;
    flex-direction: column;
}

// 列表（包含-轮播图-分类菜单-商品列表）--撑开剩余内容，内部自动滚动
.list {
    flex: 1;
    overflow: auto;
}
</style>